<template>
  <div class="form">
    <div class="title" v-if="form.title">{{ form.title }}</div>
    <van-form v-if="form.fields && form.fields.length" ref="form">
      <template v-for="(item, index) in form.fields">
        <!-- 输入框 -->
        <van-field
          v-if="item.type === 'input'"
          v-model="item.value"
          :key="index"
          :label="item.label"
          :placeholder="item.placeholder"
          :rules="[item.rules]"
          colon
        />
        <!-- 文本区域 -->
        <van-field
          v-if="item.type === 'textarea'"
          :type="item.type"
          v-model="item.value"
          :key="index"
          :label="item.label"
          :placeholder="item.placeholder"
          :rules="[item.rules]"
          colon
          required
          class="bt-10"
          rows="5"
          autosize
        />
        <!-- 维修状态 -->
        <template v-if="item.type === 'status'">
          <van-field
            :label="item.label"
            :key="index"
            colon
          >
            <template #input>
              <span class="status">维修中</span>
            </template>
          </van-field>
        </template>
        <!-- 图片 -->
        <template v-if="item.type === 'uploader'">
          <!-- 上传图片 -->
          <van-field
            v-if="!item.disable"
            :label="item.label"
            :key="index"
            colon
            class="bt-10"
          >
            <template #input>
              <div class="flex-box">
                <div>
                  <van-uploader
                    v-model="item.value"
                    :max-count="6"
                    :after-read="handleUploadPicture"
                  />
                </div>
                <div class="tips">{{ item.placeholder }}</div>
              </div>
            </template>
          </van-field>
          <!-- 图片预览 -->
          <van-field
            v-if="item.disable"
            label="图片详情"
            :key="index"
            colon
            class="pt-14 pb-25 bt-10"
          >
            <template #input>
              <div class="img-wrapper">
                <van-image
                  v-for="(pic,index2) in item.value"
                  :key="index2"
                  width="80px"
                  height="80px"
                  class="mr-8 mb-10"
                  :src="pic"
                  @click="handleImagePreview(item.value)"
                />
              </div>
            </template>
          </van-field>
        </template>
        <!-- 单选框 -->
        <template v-if="item.type === 'radio'">
          <p class="b-title" :key="index + 'a'">(必选)请选择盘点结果 <span class="text">请认真填写, 提交后无法修改</span></p>
          <van-radio-group
            v-model="form.value"
            :key="index + 'b'">
            <van-radio
              v-for="option in item.options"
              :key="option.name"
              :name="option.name"
              icon-size="18px"
            >{{ option.label }}</van-radio>
          </van-radio-group>
        </template>
      </template>

    </van-form>
    <!-- 提交确认 -->
    <div class="submit-wrapper" v-if="form.submit && form.submit.show">
      <van-button block type="info" native-type="submit" @click="handleSubmit">{{ form.submit.label }}</van-button>
    </div>
  </div>
</template>

<script>
import { ImagePreview } from 'vant';
import formStore from '@/config/form';
import { FORM_TYPES } from '@/constant';
import uploadMixins from '@/mixins/upload';

export default {
  name: 'Form',
  mixins: [uploadMixins],
  props: {
    // 表单类型
    formType: {
      type: String,
      required: true,
      validator: value => _.keys(FORM_TYPES).includes(value)
    }
  },
  data () {
    return {
      form: {}
    };
  },
  methods: {
    // 初始化获取表单配置
    handleGetFormConfig () {
      const { formType } = this;
      if (!_.keys(FORM_TYPES).includes(formType)) {
        this.$notify({
          type: 'warning',
          message: '表单配置有误 :)'
        });
        return;
      }
      this.form = _.cloneDeep(formStore[formType]);
    },
    // 表单数据初始化
    handleSetUp (data) {
      if (!data) {
        this.$notify({
          type: 'warning',
          message: '表单数据有误 :)'
        });
        return;
      }
      this.form.fields.forEach(item => {
        const value = _.get(data, item.key);
        if (!_.isUndefined(value) && item.key) {
          item.value = value;
        }
      });
    },
    // 图片上传
    async handleUploadPicture (file) {
      const url = await this.handleUploadToOSS(file);
      const value = _.get(_.find(this.form.fields, { type: 'uploader' }), 'extraData');
      if (_.isArray(value)) {
        value.push(url);
      }
    },
    // 图片预览
    handleImagePreview (images) {
      const imgArr = [images];
      ImagePreview(imgArr);
    },
    handleValidate () {
      return this.form.fields.every(item => {
        if (!item.ignore) {
          const validate = _.isArray(item.value) ? item.value.length : item.value;
          if (!validate) {
            this.$notify({
              type: 'warning',
              message: item.rules.message
            });
          }
          return validate;
        }
        return true;
      });
    },
    // 获取参数
    handleGetParams () {
      let params = {
        id: this.$route.query.id
      };
      this.form.fields.forEach(item => {
        if (item.key) {
          params[item.key] = item.value;
        }
      });
      return params;
    },
    // 提交
    handleSubmit () {
      if (this.handleValidate()) {
        const params = this.handleGetParams();
        console.group(`=======>  表单提交`);
        console.log(`>>>>>>>>  `, params);
        console.groupEnd();
        this.$emit('submit', params);
      }
    }
  },
  created () {
    this.handleGetFormConfig();
  }
};
</script>

<style lang="scss" scoped>
$gray: #f8f9fd;

.form {
  .title {
    color:#1B1B1C;
    font-size: 16px;
    padding: 12px 20px 12px 15px;
    background-color: $gray;
  }
  .status {
    color: #FFA654;
  }
  .flex-box {
    display: flex;
    flex-direction: column;
  }
  .tips {
    font-size: 12px;
    color: #C1C1C1;
  }
  .img-wrapper {
    display: flex;
    flex-wrap: wrap;
  }
  ::v-deep {
    .van-field__label {
      width: 78px;
    }
  }
  .bt-10 {
    border-top: 10px solid $gray;
  }
  .submit-wrapper {
    padding: 16px 16px 40px;
    background-color: $gray;
  }
  ::v-deep {
    .van-radio {
      background-color: #fff;
      font-size: 14px;
      color: #101010;
      height: 50px;
      line-height: 50px;
      padding-left: 15px;
      border-bottom: 1px solid #f5f5f5;
    }
  }
}
</style>
<style>
.b-title {
  padding: 14px 15px;
  font-size: 14px;
  color: #1B1B1C;
  background-color:#f8f9fd;
}
.text {
  font-size: 12px;
  color: #AAAAAA;
  margin-left: 5px;
}
</style>
